import { useNavigate } from "react-router-dom"
import {  Image, Grid } from 'react-vant';
import { zzy_getType } from "../request/api";
import { useEffect, useState } from "react";
import styles from  './publishProduct.module.css'
export default function PublishProduct() {
    const [data, setData] = useState([])
    const [show, setShow] = useState(false)
    useEffect(() => {
        getlist()
    }, [])
    const getlist = () => {
        zzy_getType().then(res => {
            setData(res.data.data.slice(0, 7))
            setShow(true)
        })
    }
    const navigate = useNavigate()
    return (
        <>
            <h2>请选择您想要交易的游戏</h2>
            <div className={styles.box}>
            <Grid border={false} columnNum={4} >
                {data.map(item => {
                    return (
                        <Grid.Item key={item._id} onClick={() => navigate('/fBType', { state: { item: item } })}>  
                            <Image src={item.imgSrc} radius={'10%'}   width='5rem' height='5rem'/>
                        
                            <p>{item.typeName}</p>
                        </Grid.Item>
                    )
                })}
                {
                    show ?
                        <Grid.Item onClick={() => navigate('/fBSearchType')}>
                            <Image src='https://s1.chu0.com/src/img/png/8c/8cce3922889e41adabfc08d35a599cf2.png?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:oLYQDuEnagq3aRM29z0oar5ayfE=' radius={'10%'} width='5rem' height='5rem'></Image>
                            <p >更多游戏</p>
                        </Grid.Item>
                        : null
                }
            </Grid>
            </div>
          
        </>
    )
}  